<template>
	<view class="office_shenpi_dingdanbiaoti">

		<ul class="office_shenpi_dingdanbiaoti_top_ul">
			<li class="office_shenpi_dingdanbiaoti_top_li">
				<view style="color: rgb(205, 206, 207);">订单标题</view>
				<view>订单标题</view>
			</li>

			<li class="office_shenpi_dingdanbiaoti_top_li">
				<view style="color: rgb(205, 206, 207);">审批状态</view>
				<view>待审批(待2级审批)</view>
			</li>

			<li class="office_shenpi_dingdanbiaoti_top_li">
				<view style="color: rgb(205, 206, 207);">订单总金额</view>
				<view>￥10,000.00</view>
			</li>
		</ul>

		<view>
			<img class="office_shenpi_dingdanbiaoti_img" src="/static/officeImgs/office_shenpi_dingdan1.png" alt="" />
		</view>

		<view class="tab">
			<view style="margin-left:170rpx;" :class="{active:currentTab === 0}" @click="switchTab(0)" data-tab="0">订单动态
			</view>
			<view style="margin-left: 200rpx;" :class="{active:currentTab === 1}" @click="switchTab(1)" data-tab="1">
				资料详情</view>

		</view>

		<!-- 对应的内容部分 -->
		<view v-if="currentTab === 0">
			<view class="currentTab_one">
				<view class="currentTab_one_title">
					<text style="border: 3px solid rgb(89, 166, 252); border-radius: 50%;font-size: 12rpx; ">⚪</text>
					<text>08-23</text>
				</view>

				<view class="currentTab_one_main">
					<img style="width: 72rpx; height: 72rpx;" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view class="currentTab_one_main_mid">
						<view style="margin-top: 20rpx;">
							<text>赵小刚</text>
							<text>销售经理</text>
						</view>
						<view style="margin-top: 20rpx;">1级审批人 李小命明 审批通过</view>
						<view style="margin-top: 20rpx;">⏰2019-08-23 22：31</view>
					</view>

					<view>订单</view>
				</view>
			</view>

			<view class="currentTab_one">
				<view class="currentTab_one_title">
					<text style="border: 3px solid rgb(89, 166, 252); border-radius: 50%; font-size: 12rpx;">⚪</text>
					<text>08-23</text>
				</view>

				<view class="currentTab_one_main">
					<img style="width: 72rpx; height: 72rpx;" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view class="currentTab_one_main_mid">
						<view style="margin-top: 20rpx;">
							<text>赵小刚</text>
							<text>销售经理</text>
						</view>
						<view style="margin-top: 20rpx;">1级审批人 李小命明 审批通过</view>
						<view style="margin-top: 20rpx;">⏰2019-08-23 22：31</view>
					</view>

					<view>订单</view>
				</view>
			</view>

			<view class="currentTab_one">
				<view class="currentTab_one_title">
					<text style="border: 3px solid rgb(89, 166, 252); border-radius: 50%; font-size: 12rpx;">⚪</text>
					<text>08-23</text>
				</view>

				<view class="currentTab_one_main">
					<img style="width: 72rpx; height: 72rpx;" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view class="currentTab_one_main_mid">
						<view style="margin-top: 20rpx;">
							<text>赵小刚</text>
							<text>销售经理</text>
						</view>
						<view style="margin-top: 20rpx;">1级审批人 李小命明 审批通过</view>
						<view style="margin-top: 20rpx;">⏰2019-08-23 22：31</view>
					</view>

					<view>订单</view>
				</view>
			</view>

			<view class="currentTab_one">
				<view class="currentTab_one_title">
					<text style="border: 3px solid rgb(89, 166, 252); border-radius: 50%; font-size: 12rpx;">⚪</text>
					<text>08-23</text>
				</view>

				<view class="currentTab_one_main">
					<img style="width: 72rpx; height: 72rpx;" src="/static/officeImgs/officeshenpi2.png" alt="" />
					<view class="currentTab_one_main_mid">
						<view style="margin-top: 20rpx;">
							<text>赵小刚</text>
							<text>销售经理</text>
						</view>
						<view style="margin-top: 20rpx;">1级审批人 李小命明 审批通过</view>
						<view style="margin-top: 20rpx;">⏰2019-08-23 22：31</view>
					</view>

					<view>订单</view>
				</view>
			</view>
		</view>
		<view v-if="currentTab === 1" class="currentTab_two">
			<view class="currentTab_two_jiben">
				<view style="margin-top: 40rpx; margin-bottom: 20rpx;">
					<text>📑</text>
					<text>基本信息</text>
				</view>

				<ul class="currentTab_two_jiben_ul">
					<li class="currentTab_two_jiben_li">
						<view>订单标题</view>
						<view>订单标题</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>关联商机</view>
						<view>商机标题</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>关联客户</view>
						<view>深圳木卫二科技有限公司</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>产品记录</view>
						<view>10条</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>订单总金额</view>
						<view>￥10,000.00</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>签单日期</view>
						<view>2019-03-28</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>订单类型</view>
						<view>-</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>开始日期</view>
						<view>-</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>到期日期</view>
						<view>-</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>客户签约人</view>
						<view>-</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>我方签约人</view>
						<view>-</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>付款方式</view>
						<view>现金支付</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>归属人员</view>
						<view>赵小刚</view>
					</li>

					<li class="currentTab_two_jiben_li">
						<view>备注信息</view>
						<view>-</view>
					</li>


				</ul>
			</view>

			<view class="currentTab_two_shenpi">
				<view style="margin-top: 40rpx; margin-bottom: 20rpx;">
					<text>📑</text>
					<text>审批信息</text>
				</view>

				<ul class="currentTab_two_shenpi_ul">
					<li class="currentTab_two_shenpi_li">
						<view>提交人员</view>
						<view>赵小刚</view>
					</li>

					<li class="currentTab_two_shenpi_li">
						<view>提交时间</view>
						<view>2019-03-15 17:27</view>
					</li>

					<li class="currentTab_two_shenpi_li">
						<view>1级审批</view>
						<view>李小明</view>
					</li>

					<li class="currentTab_two_shenpi_li">
						<view>2级审批</view>
						<view>曾小红</view>
					</li>

					<li class="currentTab_two_shenpi_li">
						<view>审批状态</view>
						<view>待审批(待2级审批)</view>
					</li>

					<li class="currentTab_two_shenpi_li">
						<view>审批时间</view>
						<view>-</view>
					</li>

					<li class="currentTab_two_shenpi_li">
						<view>通知他人</view>
						<view>李小明、陈小红、曾小红</view>
					</li>
				</ul>
			</view>

			<view class="currentTab_two_xitong">
				<view style="margin-top: 40rpx; margin-bottom: 20rpx;">
					<text>📑</text>
					<text>系统信息</text>
				</view>

				<ul class="currentTab_two_xitong_ul">
					<li class="currentTab_two_xitong_li">
						<view>系统编号</view>
						<view>DD20190324010001</view>
					</li>

					<li class="currentTab_two_xitong_li">
						<view>创建人员</view>
						<view>赵小刚</view>
					</li>

					<li class="currentTab_two_xitong_li">
						<view>所属部门</view>
						<view>销售一部</view>
					</li>

					<li class="currentTab_two_xitong_li">
						<view>创建时间</view>
						<view>2019-03-15 17:27</view>
					</li>



				</ul>
			</view>
		</view>


	</view>

	<ul class="nav_bot">
		<li class="nav_bot_li" style="color: rgb(75, 206, 208);" @click="gooffice_shenpi_dingdanbiaoti_ok">
			<view>√</view>
			<view>审批通过</view>
		</li>

		<li class="nav_bot_li" style="color: rgb(251, 98, 96);" @click="gooffice_shenpi_dingdanbiaoti_no">
			<view>×</view>
			<view>审批否决</view>
		</li>

		<li class="nav_bot_li" style="color: rgb(153, 153, 153);" @click="gooffice_shenpi_dingdanbiaoti_qita">
			<view>→</view>
			<view>其他人审批</view>
		</li>

		<li class="nav_bot_li" style="color: rgb(153, 153, 153);" @click="gooffice_shenpi_dingdanbiaoti_bianji">
			<view>🖊</view>
			<view>编辑订单</view>
		</li>
	</ul>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	//tab切换
	const currentTab = ref(0)

	const switchTab = (tab) => {
		currentTab.value = tab;
	};
	//审批通过
	const gooffice_shenpi_dingdanbiaoti_ok = () => {
		uni.navigateTo({
			url: "/pages/office_shenpi_dingdanbiaoti_ok/office_shenpi_dingdanbiaoti_ok"
		})
	}
	//审批否决
	const gooffice_shenpi_dingdanbiaoti_no = () => {
		uni.navigateTo({
			url: "/pages/office_shenpi_dingdanbiaoti_no/office_shenpi_dingdanbiaoti_no"
		})
	}

	//他人审批
	const gooffice_shenpi_dingdanbiaoti_qita = () => {
		uni.navigateTo({
			url: "/pages/office_shenpi_dingdanbiaoti_qita/office_shenpi_dingdanbiaoti_qita"
		})
	}

	//编辑
	const gooffice_shenpi_dingdanbiaoti_bianji = () => {
		uni.navigateTo({
			url: "/pages/office_shenpi_dingdanbiaoti_bianji/office_shenpi_dingdanbiaoti_bianji"
		})
	}
</script>

<style lang="scss">
	.nav_bot {
		font-size: 28rpx;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 1px solid #ccc;
		background-color: #fff;

		.nav_bot_li {
			text-align: center;
		}
	}

	.office_shenpi_dingdanbiaoti {
		background-color: rgb(249, 249, 249);
		font-size: 28rpx;

		.office_shenpi_dingdanbiaoti_img {
			width: 100%;
			height: 170rpx;
		}

		.tab {
			display: flex;
			margin-top: 40rpx;
			background-color: #fff;
			height: 100rpx;
			line-height: 100rpx;

			.active {
				color: lightblue;
			}

		}

		.currentTab_one {
			padding: 20rpx;
			margin-top: 20rpx;

			.currentTab_one_title {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				margin-bottom: 40rpx;
			}

			.currentTab_one_main {

				border-radius: 30rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.currentTab_two {
			padding: 20rpx;
			margin-top: 20rpx;

			.currentTab_two_jiben {
				.currentTab_two_jiben_ul {
					.currentTab_two_jiben_li {
						background-color: #fff;
						border: 1px solid #ccc;
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}

			.currentTab_two_shenpi {
				.currentTab_two_shenpi_ul {
					.currentTab_two_shenpi_li {

						background-color: #fff;
						border: 1px solid #ccc;
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}

			.currentTab_two_xitong {
				.currentTab_two_xitong_ul {
					.currentTab_two_xitong_li {
						background-color: #fff;
						border: 1px solid #ccc;
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}

		.office_shenpi_dingdanbiaoti_top_ul {
			padding: 20rpx;
			border-top: 2rpx solid #ccc;
			display: flex;
			justify-content: space-around;

			.office_shenpi_dingdanbiaoti_top_li {
				text-align: center;

				view {
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>